<template>
  <div class="app-module">
    <div class="left-content" v-if="level == 3">
      <!-- <Transition name="slide-left" mode="out-in"> -->
      <div class="box-left">
        <ReservesStatCard></ReservesStatCard>
        <mine-tree-card></mine-tree-card>
      </div>
      <!-- </Transition> -->
    </div>
    <div class="center">
      <div class="center-top">
        <div class="center-top-left">
          <template v-if="level == 4">
            <MineSelector @toHome="onToHome"></MineSelector>
            <FunctionBar :actions="actions" @change="onActionChange" ref="FunctionBarRef"></FunctionBar>
          </template>
        </div>
        <div class="right"></div>
      </div>
      <div class="center-bottom">
        <ColorBar class="color-bar" v-if="actionsKey === 'analysis' && colorBarVisible" ref="colorBarRef"></ColorBar>
      </div>
    </div>
    <div class="right-content">
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="level < 4">
          <div class="box-volume">
            <VolumeBox></VolumeBox>
          </div>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'reserve'">
          <ReservesStats @close="onCardClose"></ReservesStats>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'volume'">
          <VolumeCalculation @close="onCardClose" :modelEditorInstance="modelEditorInstance" @loadModel="loadModel">
          </VolumeCalculation>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'report'">
          <ExcavationReport @close="onCardClose"></ExcavationReport>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'analysis'">
          <ModelSetup @command="onModelSetupCommand" @close="onCardClose" ref="modelSetupRef"></ModelSetup>
        </div>
      </Transition>
      <Transition name="slide-right" mode="out-in">
        <div class="box-right" v-if="actionsKey === 'square-setup'">
          <WeightConfig @close="onCardClose"></WeightConfig>
        </div>
      </Transition>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref, watch } from "vue";
import { useRouter } from "vue-router";
import MineTreeCard from "@/components/MineTreeCard/MineTreeCard";
import ReservesStatCard from "./modules/ReservesStatCard";
import ReservesStats from "./modules/ReservesStats";
import VolumeBox from "./modules/VolumeBox";
import VolumeCalculation from "./modules/VolumeCalculation";
import ExcavationReport from "./modules/ExcavationReport";
import WeightConfig from "./modules/WeightConfig";
import ModelSetup from "./modules/ModelSetup";
import ColorBar from "./modules/ColorBar";
import useOnemapStore from "@/store/modules/onemap";
// import ReservesSingle from "./reservesSingle";
import FunctionBar from "@/components/FunctionBar/FunctionBar.vue";
import MineSelector from "@/components/MineSelector/MineSelector.vue";
import modelEditor from "./modules/modelEditor";
import MapUtils from "./modules/mapUtils";
import { emitter } from "@/utils/events";

const onemapStore = useOnemapStore();
const router = useRouter();
const { proxy } = getCurrentInstance();
const volumeVisible = ref(true);
const actionsKey = ref(null);
const colorBarVisible = ref(false);
const actions = [
  {
    key: "reserve",
    label: "储量统计",
    icon: "icon-stat.svg",
  },
  {
    key: "volume",
    label: "方量计算",
    icon: "icon-volume.svg",
  },
  {
    key: "report",
    label: "方量报告",
    icon: "icon-report.svg",
  },
  {
    key: "analysis",
    label: "模型分析",
    icon: "icon-setup.svg",
  },
  {
    key: "square-setup",
    label: "方重配置",
    icon: "icon-config.svg",
  },
];
const level = ref(onemapStore.nodeLevel < 3 ? 3 : onemapStore.nodeLevel);
watch(
  () => onemapStore.nodeLevel,
  (newValue, oldValue) => {
    level.value = newValue;
    if (newValue.level < 4) {
      onCardClose();
    }
  }
);
// 页面被激活
onActivated(() => {
  proxy.$forceUpdate();
});
// 离开页面
onDeactivated(() => {
  mapUtils?.clearAllLayers();
  onCardClose();
});
let mapInstance,
  mapUtils,
  modelEditorInstance = null;
// 只在首页监听----监听地图是否加载完毕: mapOnload-当前页面路由name
emitter.once("mapOnload", (map) => {
  mapInstance = map;
  mapUtils = new MapUtils(map);
  modelEditorInstance = new modelEditor(mapInstance);
  console.log("地图初始化了", map);
});
const onActionChange = (key) => {
  console.log("选中了", key);
  actionsKey.value = key;


  new Promise((resolve) => {
    setTimeout(() => {
      modelEditorInstance?.removeModel();
      resolve(true);
    }, 500);
  }).then(() => {
    if (key === "analysis" || key === "volume") {
      // 加载地质模型1223
      modelEditorInstance.loadModel("1593");
    }
  });


  // if (key === "analysis" || key === "volume") {
  //   // 加载地质模型1223
  //   modelEditorInstance.loadModel("1223");
  // } else {
  //   setTimeout(() => {
  //     modelEditorInstance?.removeModel();
  //   }, 500);
  // }
};

const loadModel = (modelId) => {
  new Promise((resolve) => {
    setTimeout(() => {
      modelEditorInstance?.removeModel();
      resolve(true);
    }, 500);
  }).then(() => {
    if (modelId) {
      modelEditorInstance.loadModel(modelId);
    }
  });
};

const onToHome = () => {
  level.value = 3;
  onCardClose();
};

/**
 * 地质模型编辑
 * @param command 命令
 * @param value 参数
 */
const onModelSetupCommand = (command, value) => {
  if (command === "showAlt") {
    colorBarVisible.value = value;
    if (value) {
      nextTick(() => {
        proxy.$refs["colorBarRef"].setReverse();
      });
    }
  }
  modelEditorInstance.modelSetup(command, value);
};

const onCardClose = () => {
  modelEditorInstance?.removeModel();
  proxy.$refs["FunctionBarRef"]?.reset();
};
</script>

<style lang="scss" scoped>
.box-volume {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.color-bar {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 999;
}
</style>
